<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>乐活社区-菜商大比拼 有种你就来</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<link href="${ctxStatic}/lightapp/libao/css/style.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript"> 
	$(document).ready(function() {

	});
	
	var index=0;
	function showNext(){
		if(index<1){
			$(".bg-content").css("background-image", 'url("${ctxStatic}/lightapp/libao/p'+(index+2)+'.jpg")');
		}else if(index==1){
			$(".bg-content").css("background-image", 'url("${ctxStatic}/lightapp/libao/p'+(index+2)+'.jpg")');
			$("div.img-panel").hide();
			$("div.img-panel:eq("+(index-1)+")").show();
		}
		index++;
		if(index==7){
			setTimeout(function(){
				document.location="${ctxShop}/lightapp/libao/share";
			}, 6000);
		}
	}
	
	function showNextChoice(nextIndex){
		if(nextIndex==8){ //去跳第2个提示分享和正确答案页面
			$(".bg-content").css("background-image", 'url("${ctxStatic}/lightapp/libao/p'+nextIndex+'.jpg")');
			$("div.img-panel").hide();
		}else{
			$(".bg-content").css("background-image", 'url("${ctxStatic}/lightapp/libao/p'+nextIndex+'.jpg")');
			$("div.img-panel").hide();
			$("div.img-panel:eq("+(nextIndex-3)+")").show();
		}
	}
	</script>
</head>
<body data-role="page">
	<div role="main" class="ui-content" style="padding: 0px;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<div class="bg-content" onclick="showNext()">
			<div class="img-panel">
				<div class="img-left" onclick="showNextChoice(4)"><img src="${ctxStatic}/lightapp/libao/p3-1.jpg" width="100%"/></div>
				<div class="img-center" onclick="showNextChoice(4)"><img src="${ctxStatic}/lightapp/libao/p3-2.jpg" width="100%"/></div>
				<div class="img-right" onclick="showNextChoice(4)"><img src="${ctxStatic}/lightapp/libao/p3-3.jpg" width="100%"/></div>
			</div>
			<div class="img-panel">
				<div class="img-left" onclick="showNextChoice(5)"><img src="${ctxStatic}/lightapp/libao/p4-1.jpg" width="100%"/></div>
				<div class="img-center" onclick="showNextChoice(5)"><img src="${ctxStatic}/lightapp/libao/p4-2.jpg" width="100%"/></div>
				<div class="img-right" onclick="showNextChoice(5)"><img src="${ctxStatic}/lightapp/libao/p4-3.jpg" width="100%"/></div>
			</div>
			<div class="img-panel">
				<div class="img-left" onclick="showNextChoice(6)"><img src="${ctxStatic}/lightapp/libao/p5-1.jpg" width="100%"/></div>
				<div class="img-center" onclick="showNextChoice(6)"><img src="${ctxStatic}/lightapp/libao/p5-2.jpg" width="100%"/></div>
				<div class="img-right" onclick="showNextChoice(6)"><img src="${ctxStatic}/lightapp/libao/p5-3.jpg" width="100%"/></div>
			</div>
			<div class="img-panel">
				<div class="img-left" onclick="showNextChoice(7)"><img src="${ctxStatic}/lightapp/libao/p6-1.jpg" width="100%"/></div>
				<div class="img-center" onclick="showNextChoice(7)"><img src="${ctxStatic}/lightapp/libao/p6-2.jpg" width="100%"/></div>
				<div class="img-right" onclick="showNextChoice(7)"><img src="${ctxStatic}/lightapp/libao/p6-3.jpg" width="100%"/></div>
			</div>
			<div class="img-panel">
				<div class="img-left" onclick="showNextChoice(8)"><img src="${ctxStatic}/lightapp/libao/p7-1.jpg" width="100%"/></div>
				<div class="img-center" onclick="showNextChoice(8)"><img src="${ctxStatic}/lightapp/libao/p7-2.jpg" width="100%"/></div>
				<div class="img-right" onclick="showNextChoice(8)"><img src="${ctxStatic}/lightapp/libao/p7-3.jpg" width="100%"/></div>
			</div>
		</div>
	</div>
</body>
</html>